<template>

  <el-tabs tab-position="left" style="margin-top: 15px"  class="demo-tabs">
    <el-tab-pane label="我的订单"> <div class="component">
      <div class="top">
        <el-radio-group   @change="changeRadio" v-model="radio1" fill="#FFC75D" size="large">
          <el-radio-button  >全部</el-radio-button>
          <el-radio-button     :label="0">待支付</el-radio-button>
          <el-radio-button     :label="1">已支付</el-radio-button>
          <el-radio-button     :label="2">归还审核中</el-radio-button>
          <el-radio-button     :label="3" >已归还</el-radio-button>
        </el-radio-group>
      </div>

      <div class="demo-table-size">
        <el-table
            :data="orderList"
            style="width: 100%"
            tooltip-effect="dark"
            stripe
        >
          <el-table-column type="expand">
            <template #default="props">
              <div m="4">
                <div class="tab-msg">租赁方式 :
                  <span v-if="props.row.leaseMethod == 0">日租</span>
                  <span  v-if="props.row.leaseMethod == 1">月租</span>
                </div>
                <div class="tab-msg">租赁总时长 :
                  <span v-if="props.row.leaseMethod == 0">{{props.row.monthNums}}日</span>
                  <span  v-if="props.row.leaseMethod == 1">{{props.row.monthNums}}月</span>
                </div>
                <div class="tab-msg">租车时间 :
                  {{ new Date(props.row.rentalTime).toLocaleDateString() }}
                </div>
                <div class="tab-msg">还车时间 :
                  {{ new Date(props.row.returnTime).toLocaleDateString() }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column property="orderId" label="订单号" align="center" width="120px" />
          <el-table-column property="carNum" label="车牌号" align="center" />
          <el-table-column property="modelNum" label="车辆型号" align="center"  width="100px"/>
          <el-table-column property="status" label="订单状态" align="center" width="100px">
            <template #default="scope">
              <el-tag class="ml-2" type="danger" v-if="scope.row.status == 0">未支付</el-tag>
              <el-tag class="ml-2" type="info" v-if="scope.row.status == 1">已支付</el-tag>
              <el-tag class="ml-2" type="warning" v-if="scope.row.status == 2">待审核</el-tag>
              <el-tag class="ml-2" type="success" v-if="scope.row.status == 3">已完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column property="rent" label="租金" align="center"/>
          <el-table-column property="deposit" label="押金" align="center"/>
          <el-table-column property="totalMoney" label="需支付总金额" align="center"/>
          <el-table-column  label="支付" align="center">
            <template #default="scope">
              <el-button type="danger" @click="getOrderPay(scope.row.id)" v-if="scope.row.status == 0">去支付</el-button>
              <el-tag v-if="scope.row.status > 0">已支付</el-tag>
            </template>

          </el-table-column>
          <el-table-column  label="还车" align="center">
            <template #default="scope">
              <el-popconfirm title="确定取消订单吗？" @confirm="cancelOrder(scope.row.id)"  >
                <template #reference>
                  <el-button type="danger" v-if="scope.row.status == 0" >取消订单</el-button>
                </template>
              </el-popconfirm>
              <el-button type="danger"  v-if="scope.row.status == 1"  @click="getRetrunCar(scope.row.id)">立即还车</el-button>
              <el-tag type="danger" v-if="scope.row.status == 2" >已提交还车审核</el-tag>
              <el-tag type="success" v-if="scope.row.status == 3" >已还车</el-tag>
            </template>
          </el-table-column>
          <el-table-column  label="评价" align="center">
            <template #default="scope">
              <el-button type="danger" @click="getRate(scope.row.id)" v-if="scope.row.status == 3 && scope.row.rateState == 0">评价</el-button>
              <el-tag v-if="scope.row.status < 3">订单完成后可评价</el-tag>
              <el-tag type="success" v-if="scope.row.rateState == 1">已完成评价</el-tag>
            </template>

          </el-table-column>

        </el-table>
      </div>


      <!--新增对话框-->
      <el-dialog
          title="还车"
          v-model="dialogVisible"
          width="500px"
          :before-close="handleClose">

        <el-form
            ref="ruleFormRef"
            :rules="rules"
            :model="editForm"  >


          <el-form-item prop="orderId" >
            <el-input type="hidden" v-model="editForm.orderId"  ></el-input>
          </el-form-item>

          <el-form-item label="实际还车日期" prop="realTime" label-width="120px">
            <el-date-picker
                v-model="editForm.realTime"
                type="date"
                placeholder="还车日期"
                style="width: 100%"
            />
          </el-form-item>


        </el-form>
        <div slot="footer" style="margin-left: 150px" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog
          title="订单评价"
          v-model="dialogVisible2"
          width="500px"
          :before-close="handleClose2">

        <el-form
            ref="ruleFormRef2"
            :rules="rules2"
            :model="form"  >

          <el-form-item prop="orderId" >
            <el-input type="hidden" v-model="form.orderId"  ></el-input>
          </el-form-item>

          <el-form-item label="评分" prop="score" label-width="120px">
            <el-rate v-model="form.score" />
          </el-form-item>

          <el-form-item label="内容"  prop="content" label-width="120px">
            <el-input  v-model="form.content"  :autosize="{ minRows: 5, maxRows: 15}"  type="textarea"  autocomplete="off"></el-input>
          </el-form-item>
          <div slot="footer" style="margin-left: 150px" class="dialog-footer">
            <el-button @click="handleClose2">取 消</el-button>
            <el-button type="primary" @click="submitForm2(ruleFormRef2)">确 定</el-button>
          </div>


        </el-form>

      </el-dialog>



    </div></el-tab-pane>
    <el-tab-pane label="我的信息"><UserInfo/></el-tab-pane>

  </el-tabs>


</template>
<script setup>

import {computed, onMounted, reactive, ref} from "vue";
import axios from "@/axios.js"
import {router}  from "@/router/index.js"
import UploadUtil from "@/components/UploadUtil.vue";
import {ElMessage} from "element-plus";
import UserInfo from "@/views/user/UserInfo.vue";

const radio1 = ref('')

onMounted(()=>{
  meOrderList('')
})

const orderList = ref([{}])

const meOrderList = (val)=>{
  axios.get("/order/meOrderList",
      {
        params: {
          status:val,
        }
      }).then(res=>{
      orderList.value = res.data
  })
}

const changeRadio = (val)=>{
    meOrderList(val)
}

const getOrderPay = (id)=>{
   router.push(`/orderPay/${id}`)
}


const getRetrunCar = (id)=>{
    editForm.value.orderId = id
    dialogVisible.value = true
}



const dialogVisible = ref(false)
const dialogVisible2 = ref(false)

const ruleFormRef = ref(null)
const ruleFormRef2 = ref(null)
const rules = reactive({
  realTime: [
    { required: true, message: '不能为空', trigger: 'blur' },
  ],
})

const rules2 = reactive({
  score: [
    { required: true, message: '不能为空', trigger: 'change' },
  ],
})
const handleClose = ()=>{
  dialogVisible.value = false
  editForm.value = ref({})
}

const handleClose2 = ()=>{
  dialogVisible2.value = false
  form.value = ref({})
}

const form = ref({


})


const editForm = ref({


})

//取消订单
const cancelOrder = (id)=>{
  axios.post(`/order/cancel/${id}`).then(res=>{
      ElMessage({
        showClose: true,
        message: '取消订单成功',
        type: 'success',
        onClose: () => {
          meOrderList('')
        }
      });
  })
}

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(editForm.value)
      axios.post(`/returnCar/add`,editForm.value)
          .then(res => {
            ElMessage({
              showClose: true,
              message: '恭喜你，还车成功',
              type: 'success',
              onClose: () => {
                meOrderList('')
              }
            });

          })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const getRate = (id)=>{
    form.value.orderId = id
    dialogVisible2.value = true
}

const submitForm2 = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(form.value)
      axios.post(`/rate/addRate`,form.value)
          .then(res => {
            ElMessage({
              showClose: true,
              message: '恭喜你，评价成功',
              type: 'success',
              onClose: () => {
                meOrderList('')
              }
            });

          })
    } else {
      console.log('error submit!', fields)
    }
  })
}


</script>
<style scoped>
.component{
  width: 1350px;
  background-color: #F9F9F9;
}
.top{
  padding-top: 30px;
  padding-left: 350px;
  height: 70px;
}
.demo-table-size{
  padding-left: 20px;
}

.tab-msg{
  display: inline-block;
  padding-left: 80px;
  width: 300px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>